import React, { useEffect, useRef, useState } from 'react'
import {
  Slider,
  colors,
} from '@material-ui/core';
import { Icon } from 'components/atoms';

import 'assets/css/musicPlay.css';

export default function VideoPlay(props) {

  const { playedSeconds, playDuration, isPlay, setIsPlay, adsPlayer, setVolume, setMuted } = props;
  const musicRef = useRef()
  const [musicInfo, setMusicInfo] = useState([])
  const [musicIndex, setMusicIndex] = useState(0)
  const [musicSrc, setMusicSrc] = useState('')
  const [currentTime, setCurrentTime] = useState(0)
  const [maxTime, setMaxTime] = useState(0)
  const [musicVolume, setMusicVolume] = useState('')

  useEffect(() => {
    setCurrentTime(playedSeconds)
    setMaxTime(playDuration ? playDuration : 0)
  }, [playedSeconds, playDuration])

  const songTimeFilter = (val) => {
    const dt = new Date(val * 1000)
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    return `${mm}:${ss}`
  }

  const changePlayerVolume = (event, newValue) => {
    if (newValue == 0) return (setMuted(true))
    setVolume(newValue / 10)
    setMuted(false)
  }

  const changePlayMusic = (num) => {
    const index = musicIndex + num
    if (index < 0) return setMusicIndex(musicInfo.length - 1)
    if (index >= musicInfo.length) return setMusicIndex(0)

    setMusicIndex(index)
  }

  const sliderChange = (event, newValue) => {
    adsPlayer.current.seekTo(newValue)
    setCurrentTime(newValue)
  }

  return (
    <>
      <div className='musicPlay'>

        <div className="musicBox">

          <div className='musicMain musicMain_md'>
            <audio ref={musicRef} type="audio" src={musicSrc}></audio>
            <div className="musicInfo">
              <div className="operationBar">
                <Icon
                  fontIconClass="fas fa-step-backward"
                  fontIconColor={"#fff"}
                  onClick={() => changePlayMusic(-1)}
                />
                {props.isPlay ? (
                  <Icon
                    fontIconClass="fas fa-pause"
                    fontIconColor={"#fff"}
                    onClick={() => props.setIsPlay(!props.isPlay)}
                  />
                ) : (
                  <Icon
                    fontIconClass="fa fa-play"
                    fontIconColor={"#fff"}
                    onClick={() => props.setIsPlay(!props.isPlay)}
                  />
                )}
                <Icon
                  fontIconClass="fas fa-step-forward"
                  fontIconColor={"#fff"}
                  onClick={() => changePlayMusic(1)}
                />
              </div>
            </div>
          </div>

          <div className="progressBar">
            <Slider
              value={currentTime}
              max={maxTime}
              onChange={sliderChange}
            />
          </div>

          <div className="musicTime">
            {songTimeFilter(currentTime)} / {songTimeFilter(playDuration)}
          </div>

          <div className="musicDesc">
            Available on:
          </div>

          <div className='musicMain'>
            <div className="musicInfo">
              <div className="operationBar">
                <Icon
                  fontIconClass="fas fa-step-backward"
                  fontIconColor={"#fff"}
                  onClick={() => changePlayMusic(-1)}
                />
                {isPlay ? (
                  <Icon
                    fontIconClass="fas fa-pause"
                    fontIconColor={"#fff"}
                    onClick={() => setIsPlay(!isPlay)}
                  />
                ) : (
                  <Icon
                    fontIconClass="fa fa-play"
                    fontIconColor={"#fff"}
                    onClick={() => setIsPlay(!isPlay)}
                  />
                )}
                <Icon
                  fontIconClass="fas fa-step-forward"
                  fontIconColor={"#fff"}
                  onClick={() => changePlayMusic(1)}
                />
              </div>
            </div>
          </div>


          <div className="volume">
            <div className="volume_icon">
              <Icon
                fontIconClass="fas fa-volume-down"
                fontIconColor={"#fff"}
                size='medium'
              />
            </div>
            <div className="volumeSlider">
              <Slider defaultValue={0} max={10} onChange={changePlayerVolume} />
            </div>
          </div>
        </div>
      </div>

    </>

  )
}